details.ExpandableToggle {
    --title: var(--expandable-toggle-title, currentColor);
    --border: var(--expandable-toggle-border, #d0dae3);
    --content: var(--expandable-toggle-content, #{$blue-60});

    --button: var(--expandable-toggle-button, #{$blue-90});
    --button-hover: var(--expandable-toggle-button-hover, #{$blue-60});

    --title-size: var(--expandable-toggle-title-size, 1rem);
    --content-size: var(--expandable-toggle-content-size, 0.875rem);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    // Hide the default expand/collapse icons of the <summary> element
    .ExpandableToggle__container {
        list-style: none;
        &::marker,
        &::-webkit-details-marker {
            display: none;
        }
    }

    .ExpandableToggle__button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 16px 0;
        color: var(--button);
        background-color: transparent;
        border: none;
        cursor: pointer;
        text-align: left;

        &:hover {
            color: var(--button-hover);
        }

        .ExpandableToggle__title {
            @include h4-semibold;
            margin: 0;
            color: var(--title);
            font-size: var(--title-size);

            &:hover {
                color: var(--button-hover);
            }
        }

        .ExpandableToggle__icon {
            font-size: 0.75em;
            margin: 0 12px;
        }
    }

    .ExpandableToggle__content,
    .ExpandableToggle__teaser {
        height: 0;
        overflow: hidden;
        color: var(--content);

        @include body-3-medium;
        font-size: var(--content-size);

        .article-block__text,
        .article-block__list,
        .article-block__html,
        .article-block__numbered-list,
        p {
            @include body-3-medium;
            font-size: var(--content-size);
        }

        > *:first-child {
            margin-top: 0;
        }

        > *:last-child {
            margin-bottom: 0;
        }
    }
}

details.ExpandableToggle--stacked {
    border-bottom: none;
}

details.ExpandableToggle--teaser .ExpandableToggle__button,
.ExpandableToggle[open] .ExpandableToggle__button {
    padding-bottom: 8px;
}

details.ExpandableToggle--teaser .ExpandableToggle__teaser {
    display: block;
    height: 96px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent);
}

details.ExpandableToggle[open] .ExpandableToggle__teaser {
    display: none;
}

details.ExpandableToggle[open] .ExpandableToggle__content {
    padding-bottom: 16px;
    height: auto;
    -webkit-mask-image: none;
}

// Show the correct icon based on the state of the details element
details.ExpandableToggle .ExpandableToggle__icon--expand {
    display: block;
}
details.ExpandableToggle[open] .ExpandableToggle__icon--expand {
    display: none;
}

details.ExpandableToggle .ExpandableToggle__icon--collapse {
    display: none;
}
details.ExpandableToggle[open] .ExpandableToggle__icon--collapse {
    display: block;
}
